INTERNSHIP AT THASKIFY
As the final project for the Coding Bootcamp, I was selected by the institution to participate in a four-week internship at Thaskify, a digital startup offering an all-in-one application for project management. This was an extraordinary opportunity to work as part of a team in a real project, and put into practice all the skills acquired during the bootcamp!
The code is not public, so I can't show it here. Nevertheless, I can still show you the features and solutions I worked in. Scroll down to check it out!
1. WORKLOAD DASHBOARD
Description
In one week, we developed an Individual and Team Performance Dashboard, which aims to provide managers with a comprehensive tool for analyzing team workload, tasks status, individual performances, and time estimates—ensuring they're always a step ahead in task delegation
My role
To develop this feature, I worked together with two other teammates. My tasks were:
1. Study the request and decide together with the PM the KPIs to show in the dashboard.
2. Design the dashboard layout.
3. Create the 'Workload' component.
4. Design and create the individual panel component.
5. Inside the individual panel, design and create the Header, the Task Status section, and the Time Estimate section.
A second teammate designed and created the bar chart component, and a third teammate designed and created the dropdown section at the end of the individual panel. We were able to work together by using Git, GitHub and GitFlow.
The dashboard
The dashboard shows the following information:
a. A bar chart with the % of complete tasks over assigned tasks by each team member.
b. An individual panel per team member containing:
b.1. A header with the member registered name and profile picture.
b.2. A Tasks Status section showing (1) pending tasks, (2) complete tasks ,and (3) % of complete tasks over assigned tasks. When hovering over the metrics, a modal is displayed with a breakdown of the tasks by level of difficulty. If there are tasks for the manager to review, the message "⏳ X pending tasks IN REVIEW" will be displayed, and when hovering over the message a modal with the tasks detail will be displayed.
b.3. A Time Estimate section showing (1) the sum of working days since assigned among all pending tasks, (2) the sum of working days for due completion among all pending tasks, and (3) an horizontal bar with the progress. When hovering over the metrics, a modal is displayed with a breakdown of the tasks by level of difficulty.The horizontal bar will have a different color depending on the tasks status:
b.3.1. Green: everything ok, no issues.
b.3.2. Yellow: the member has more than 90% of the work done. Below the bar the message "🚨 Almost out of tasks. Assign new tasks" will be displayed.
b.3.3. Red: there is at least one delayed task. Below the bar the message "⚠️ Xd delayed with Y tasks" will be displayed, and when hovering over the message a modal with the tasks detail will be displayed.
b.3.4. Blue: all tasks are done. The message "✔️ All tasks have been completed!" will be displayed.
b.4. Other messages can be displayed below the horizontal bar:
b.4.1. "🚨 No tasks assigned" when the member has no tasks pending nor done.
b.4.2. "⚠️ X tasks may de delayed according to {name} average completion time" when the time assigned for a task is lower than the calculated average time taken by the member to complete tasks with same level of difficulty. When hovering over the message a modal with the tasks detail will be displayed.
b.4.3. "⚠️ X tasks without estimate" when there are tasks that have no due date. When hovering over the message a modal with the tasks detail will be displayed.
b.5. A dropdown by status with a detail of the tasks.
Technologies used
To complete this task, I used the following technologies: JavaScript, HTML, CSS, React, Redux, MongoDB, and the React Circular Progressbar and Chart.js libraries.
2. IMPROVEMENTS TO SIGN-UP FLOW
Description
Thaskify was having issues when managers wanted to invite users to their organization. Managers had to send the organization ID to the users, for them to introduce it during the sign-up process. This was not intuitive, leading to a bad UX and to incorrect accounts created. Our task was to improve this sign-up flow, through a URL the manager could share to the users. When users clicked on that URL, they were automatically directed to the sign-up page and automatically linked to the organization, so they would only have to complete their personal information. Following agile methodologies, I propose a first and fast 100% client-side solution, where the URL contained a param with the encoded organization ID. When visiting the landing page, if the URL was containing a param, then the sign-up page would be rendered, the param would be decoded, and the organization information would be automatically completed. We were able to make this in just one day and tackle a critical problem for Thaskify!
My role
To develop this feature, I worked together with another teammate. My task was to work on the Landing component, in order to check if the URL had a param, and make the component dynamic accordingly.
1. If there was a param in the URL: the sign-up page was rendered, the organization ID was decoded, and the organization information was automatically completed.
2. If there was not a param in the URL: the landing page was rendered, and if the user visited the sign-up page, he/she had to create an organization.
3.Titles and paragraphs were dynamic as well.
My teammate worked on the modal showing the link the encoded organization ID.
Technologies used
To complete this task, I used the following technologies: JavaScript, HTML, CSS, React and Redux.
3. ENABLE QUILL TEXT EDITOR TO SAVE ANY IMAGE
Description
Thaskify was using the Quill library to have a text editor in the task modal. Quill embeds images into the document by generating a base64 string for the src attribute of the <img> HTML element. However, if the string is too long, the image won't be saved. My task was to solve this problem so any image could be saved.
Solution
This was a one-person task, so I worked by myself. First, I exhaustively examined the Quill library documentation, but didn't find any configuration that could solve the problem. A Sr. Frontend Developer friend told me days later that when he faces problems like this, he gets into the library code and makes changes directly there. But I hadn't thought of that this time! Instead, I came up with an intricate solution, which I knew was possibly not the ultimate solution, but it worked.
1. I created a function called base64ToImageUrl, which converted the string in which the image was saved into a URL.
2. I created a second function called convertImagesToUrl, which received a HTML block of code, identified the images, converted them into URLs (using the base64ToImageUrl function), and returned the block of code with the images converted.
3. In the Comments component inside the task modal, the convertImagesToUrl function was called and the HTML block of code generated by Quill was passed in. Finally, the result was dispatched to the Redux store.
There might be an edge case in which this solution doesn't work, but so far all the images that couldn't be saved before could be saved now.
Technologies used
To complete this tasks, I used the following technologies: JavaScript, HTML, CSS, React, Redux and the Quill library.
4. CODE OPTIMIZATION AND CORRECTIONS
Description
Thaskify has a Rewards section, where users can redeem points generated by completed tasks. This section had an inefficient code that was presenting two main issues: (1) multiple unnecessary API requests were being made and (2) React components were not re-rendering correctly when states were being apparently updated.
Solutions
This was also a one-person task. There is not much to show in the web browser here, because the improvements were primarily focused on optimizing the logic, and making corrections in the React and Redux code for better performance. After analyzing the code, I could identify improvements opportunities and made the following changes:
1. Reduce unnecessary API requests: there was a first dispatching action making an API request. With this request, a controller function in the backend updated the database with information regarding reward points, and responded with the updated information. Then, this same dispatch action was calling another dispatch action, which subsequently made a new API request to get the updated information to update the global state. Therefore, I was able to eliminate the second API request, and update the global state with the information received by the first one. I needed to make some minor changes in the controller function in the backend as well.
2. Promise.all() for concurrent promises: a useEffect Hook in a React component was executing promises sequentially within a loop. To improve performance, I replaced this loop with a Promise.all() method, allowing promises to execute concurrently. Additionally, this useEffect was making an API request to retrieve a variable value that may have already been obtained. Therefore, I added a condition to ensure that the API request wasn't made if the variable value had already been retrieved.
3. Correct Redux configuration for proper state updates: there were some errors in the reducer configuration, which resulted in the global state not changing when certain actions were dispatched. This led to some React components not re-rendering, as the state wasn't actually being updated. Therefore, I made the necessary corrections in the reducer and the dispatching actions, so the global state was successfully updated. I needed to make some minor changes in the controller functions in the backend as well.
Technologies used
To complete this tasks, I used the following technologies: JavaScript, HTML, CSS, React, Redux, TypeScript, Node.js and Express.
